<template>
    <el-form-item
        :label="item.label && !item.question ? item.label : ''"
        :prop="item.prop"
    >
        <span slot="label" v-if="item.question">
            <el-tooltip :content="item.question" placement="top">
                <i class="el-icon-question"></i>
            </el-tooltip>
            {{ item.label }}
        </span>
        <el-slider
            v-model="formData[item.prop]"
            :min="item.min"
            :max="item.max"
            :disabled="item.disabled"
            :show-input="item.showInput"
            :show-input-controls="item.showInputControls"
            :input-size="item.inputsize | setSize(item.inputsize)"
            :show-stops="item.showStops"
            :show-tooltip="item.showTooltip"
            :format-tooltip="item.formatTooltip"
            :range="item.range"
            :vertical="item.vertical"
            :height="item.height"
            :label="item.label"
            :debounce="item.debounce"
            :tooltip-class="item.tooltipClass"
            :marks="item.marks"
            @change="handleChange"
            @input="handleInput"
        />
    </el-form-item>
</template>
<script>
import mixin from '../mixins/index.js'
export default {
    name: 'df-slider',
    mixins: [mixin],
    props: {
        item: {
            type: Object,
            default() {
                return {
                    /**
                     * 绑定值
                     * @type number
                     * @value 1
                     */
                    sliderVal: 10,
                    /**
                     * 设置最小值
                     * @type number
                     * @value 0
                     */
                    min: 0,
                    /**
                     * 设置最大值
                     * @type number
                     * @value 100
                     */
                    max: 100,
                    /**
                     * 是否禁用
                     * @type boolean
                     * @value true/false
                     */
                    disabled: false,
                    /**
                     * 计数器步长
                     * @type number
                     * @value 1
                     */
                    step: 1,
                    /**
                     * 是否显示输入框，仅在非范围选择时有效
                     * @type boolean
                     * @value true/false
                     */
                    showInput: false,
                    /**
                     * 在显示输入框的情况下，是否显示输入框的控制按钮
                     * @type boolean
                     * @value true/false
                     */
                    showInputControls: true,
                    /**
                     * 输入框的尺寸
                     * @type string
                     * @value large / medium / small / mini
                     */
                    inputsize: 'medium',
                    /**
                     * 是否显示间断点
                     * @type boolean
                     * @value true/false
                     */
                    showStops: false,
                    /**
                     * 是否显示 tooltip
                     * @type boolean
                     * @value true/false
                     */
                    showTooltip: false,
                    /**
                     * 格式化 tooltip message
                     * @type function(value)
                     * @param 当前的值
                     */
                    formatTooltip: function(val) {
                        console.log(val)
                    },
                    /**
                     * 是否为范围选择
                     * @type boolean
                     * @value true/false
                     */
                    range: false,
                    /**
                     * 是否竖向模式
                     * @type boolean
                     * @value true/false
                     */
                    vertical: false,
                    /**
                     * Slider 高度，竖向模式时必填
                     * @type string
                     * @value
                     */
                    height: '',
                    /**
                     * 屏幕阅读器标签
                     * @type string
                     * @value
                     */
                    label: '',
                    /**
                     * 输入时的去抖延迟，毫秒，仅在show-input等于true时有效
                     * @type number
                     * @value 300
                     */
                    debounce: 300,
                    /**
                     * tooltip 的自定义类名
                     * @type string
                     * @value
                     */
                    tooltipClass: 'df-slider',
                    /**
                     * 标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式
                     * @type object
                     * @value
                     */
                    marks: {},
                    /**
                     * 自定义输入框类名
                     * @type string
                     * @value 'red'
                     */
                    class: ''
                }
            }
        },
        formData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        /**
         * 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）
         * @param 改变后的值
         *
         */
        handleChange(data) {
            this.dispatch('baseForm', 'onSliderChange', {
                data: data,
                prop: this.item.prop
            })
        },
        /**
         * 数据改变时触发（使用鼠标拖曳时，活动过程实时触发）
         * @param 改变后的值
         *
         */
        handleInput(data) {
            this.dispatch('baseForm', 'onSliderInput', {
                data: data,
                prop: this.item.prop
            })
        }
    }
}
</script>
